<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta name="viewport"
		content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
	<meta name="renderer" content="webkit" />
	<meta name="force-rendering" content="webkit" />
	<title>学习</title>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.css">
	<link rel="stylesheet" type="text/css" href="css/common.css" />
	<link rel="stylesheet" type="text/css" href="css/index.css" />
	<script src="js/config.js"></script>
	<script src="js/axios.min.js"></script>
	<script src="js/axios-config.js?v=4"></script>
	<script src="js/vue/vue.js"></script>
	<script src="js/component.js?v=10"></script>
	<script src="https://cdn.jsdelivr.net/npm/@nutui/nutui@2.2.13/dist/nutui.min.js"></script>
</head>

<body>
	<div id="app">
		<div class="topss">
			<div class="topssbox">
				<img src="img/index/s.png" />
				<input type="text" placeholder="搜索你感兴趣的课程" class="ss-input" v-model="keyword" @keyup.enter="submit" />
			</div>
		</div>
		<div class="xuexi-nav" v-cloak>
			<ul class="d-f a-c-c j-c-c">
				<li class="d-f f-d-c j-c-c a-c-c">
					<img src="img/index/icon_study_xueshi.png" class="xueshi-nav-logo" />
					<p class="xuexi-nav-title">累计学时</p>
					<p class="xuexi-nav-jishi">{{ total.studyTime }}分钟</p>
				</li>
				<li class="d-f f-d-c j-c-c a-c-c">
					<img src="img/index/icon_study_renwu.png" class="xueshi-nav-logo" />
					<p class="xuexi-nav-title">今日学习</p>
					<p class="xuexi-nav-jishi">{{ total.todayTime }}分钟</p>
				</li>
				<li class="d-f f-d-c j-c-c a-c-c">
					<img src="img/index/icon_study_lianxu.png" class="xueshi-nav-logo" />
					<p class="xuexi-nav-title">连续学习</p>
					<p class="xuexi-nav-jishi">{{ total.onlineTime }}分钟</p>
				</li>
				<li class="d-f f-d-c j-c-c a-c-c">
					<img src="img/index/icon_study_kecheng.png" class="xueshi-nav-logo" />
					<p class="xuexi-nav-title">完成课程</p>
					<p class="xuexi-nav-jishi">{{ total.studyCompleted }}节课</p>
				</li>
			</ul>
		</div>
		<div class="zhuanti-wrapper" v-cloak>
			<div class="xuexi-nav-two" style="justify-content: center;">
				<span class="zhuanti-nav-cell" :class="{on:1==tab}" @click="tab=1">
					我的学习计划
					<em class="line-bottom" v-if="1==tab"></em>
				</span>
				<span class="zhuanti-nav-cell" :class="{on:2==tab}" @click="tab=2">
					词汇学习
					<em class="line-bottom" v-if="2==tab"></em>
				</span>
			</div>
			<!-- 学习计划列表 -->
			<div class="zhuantimulu_cont" v-show="1==tab">
				<ul class="mulu-shipin xuexi-shipin">
					<nut-infiniteloading @loadmore="loadMore()" :has-more="hasMore" :is-loading="loading"
						:is-showMod="true" unload-more-txt="没有更多了">
						<template v-for="item in dataList">
							<nut-leftslip :ref="'plan'+item.id">
								<div slot="slip-main">
									<li class="d-f">
										<div class="shipin-pic">
											<img :src="item.topic.cover_url" />
										</div>
										<div class="shipin-cont flex1">
											<div class="jihua-title">{{item.topic.title}}</div>
											<div class="shipin-time d-f a-c-c j-c-s">
												<div class="xuexi-jindu d-f a-c-c">
													<span class="jindu-label"
														:style="'width:'+item.progress + '%'"></span>
													<i class="jindu-num">{{item.progress}}%</i>
												</div>
												<div class="lijixueli" @click="goTopic(item.src_id)">立即学习</div>
											</div>
										</div>
									</li>
								</div>
								<div slot="slipbtns" class="slipbtns" v-if="item.order_id==0">
									<a @click="del(item)">删除</a>
								</div>
								<div slot="slipbtns" class="slipbtns slipbtns-disable" v-else>
									<a @click="noDel()">不可删除</a>
								</div>
							</nut-leftslip>
						</template>
					</nut-infiniteloading>
				</ul>
			</div>
			<!-- 词汇学习列表 -->
			<div class="zhuantimulu_cont" v-show="2==tab">
				<audio id="transAudio" class="hide" :src="words.tts"></audio>
				<ul class="mulu-shipin xuexi-shipin">
					<nut-infiniteloading @loadmore="loadMore()" :has-more="words.hasMore" :is-loading="words.loading"
						:is-showMod="true" unload-more-txt="没有更多了">
						<template v-for="item in words.rows">
							<nut-leftslip :ref="'word'+item.id">
								<div slot="slip-main">
									<li class="d-f">
										<div class="shipin-cont flex1">
											<div class="jihua-title">
												<span class="word-title">{{item.word}}</span>
												<span class="word-pro" v-for="pro in item.trans.pronunciation">
													/{{ pro }}/
												</span>
												<span class="word-pro">
													<img class="trans-icon"
														:src="item.playing ? 'img/index/icon_ship_yuyin_pre.png' : 'img/index/icon_ship_yuyin.png'"
														@click="wordPlay(item)" />
												</span>
											</div>
											<div class="shipin-time a-c-c j-c-s" v-for="parts in item.trans.parts">
												<div v-for="part in parts">
													{{ part.part }} {{ part.means.join('； ') }}
												</div>
											</div>
										</div>
									</li>
								</div>
								<div slot="slipbtns" class="slipbtns">
									<a @click="del(item)">删除</a>
								</div>
							</nut-leftslip>
						</template>
					</nut-infiniteloading>
				</ul>
			</div>
		</div>
		<footbox active="xuexi"></footbox>
	</div>
</body>
<script>
	var app = new Vue({
		el: '#app',
		data: {
			keyword: '',
			page: 1,
			hasMore: true,
			loading: false,
			dataList: [],
			total: {
				studyTime: 0,
				studyCompleted: 0,
				onlineTime: 0,
				todayTime: 0
			},
			tab: 1,
			words: {
				page: 1,
				hasMore: true,
				loading: false,
				rows: [],
				playing: false,
				tts: null
			}
		},
		created() {
			this.getList()
		},
		watch: {
			tab(v) {
				if (2 == v && 1 == this.words.page && 0 == this.words.rows.length) {
					this.getWords();
				}
			}
		},
		methods: {
			getList() {
				this.loading = true;
				axios.get('/mp/studyPlan/index', { params: { page: this.page } }).then(res => {
					this.loading = false;
					this.hasMore = 10 === res.data.list.length;
					this.dataList = res.data.list;
					this.total.studyTime = parseInt(res.data.total.studyTime / 60);
					this.total.studyCompleted = res.data.total.studyCompleted;
					this.total.onlineTime = parseInt(res.data.total.onlineTime / 60);
					this.total.todayTime = parseInt(res.data.total.todayTime / 60);
				});
			},
			getWords() {
				this.words.loading = true;
				axios.get('/mp/word/getList', { params: { page: this.words.page } }).then(res => {
					this.words.loading = false;
					this.words.hasMore = 10 === res.data.length;
					this.words.rows.push(...res.data);
				});
			},

			wordPlay(item) {
				const listenPlay = () => {
					this.words.tts = null;
					this.words.playing = false;
					item.playing = false;
					transAudio.removeEventListener('ended', listenPlay);
				};
				const listenLoad = () => {
					transAudio.removeEventListener('canplay', listenLoad);
					transAudio.play();
					this.words.playing = true;
					this.$set(item, 'playing', true);
				};
				if (this.words.playing) {
					listenPlay();
				}
				this.words.tts = item.trans.tts;
				transAudio.addEventListener('canplay', listenLoad);
				transAudio.addEventListener('ended', listenPlay);
				transAudio.load();
				transAudio.onloadedmetadata = listenLoad;
			},

			goTopic(id) {
				window.location.href = "/zhuantimulu.html?id=" + id;
			},

			// 删除
			del(item) {
				const self = this;
				if (1 == self.tab) {
					this.$dialog({
						id: 'del',
						content: "是否确认删除学习计划？",
						onOkBtn() {
							this.close();
							const loading = self.$toast.loading('正在删除...');
							axios.post('/mp/studyPlan/del', { id: item.id }).then(e => {
								loading.hide();
								if (1 == e.data.code) {
									self.$notify.success('删除成功');
									self.$refs['plan' + item.id][0].sliderEle.remove();
								} else {
									self.$toast.warn(e.data.msg);
								}
							});
						}
					});
				} else {
					this.$dialog({
						id: 'del',
						content: "是否确认删除单词？",
						onOkBtn() {
							this.close();
							const loading = self.$toast.loading('正在删除...');
							axios.post('/mp/word/del', { id: item.id }).then(e => {
								loading.hide();
								if (1 == e.data.code) {
									self.$notify.success('删除成功');
									self.$refs['word' + item.id][0].sliderEle.remove();
								} else {
									self.$toast.warn(e.data.msg);
								}
							});
						}
					});
				}
			},

			// 不可删除
			noDel(){
				this.$notify.warn('购买的课程无法删除');
			},

			// 加载更多
			loadMore() {
				if (1 == this.tab) {
					this.page++;
					this.getList();
				} else {
					this.words.page++;
					this.getWords();
				}
			},

			// 搜索
			submit() {
				const keyword = this.keyword.trim();
				if ('' === keyword) {
					return;
				}
				window.location.href = '/sousuojieguo.html?keyword=' + encodeURIComponent(keyword);
			},
		}
	})
</script>

</html>